<template>
    <div style="height:100%;width:100%;">
        <div class="retrieval">
            <div class="retrieval-title youba-primary-grey" style="text-align:center">我们已经发送了校验码到你的手机:</div>
            <h2 style="text-align:center">{{findPwdObj.mobile}}</h2>
            <div class="retrieval-group">
                <mu-input class="retrieval-input" label="验证码" label-class="retrieval-input-label" type="number" v-model="code" placeholder="请输入验证码">
                    <div :class="verify" class="forget-pass" @click="getVerify">{{label}}</div>
                </mu-input>
            </div>
            <div class="retrieval-btn">
                <x-button @click.native="next">下一步</x-button>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {mapMutations} from 'vuex'
    import VUEX_NAME from '../../store/constants.vue'
    import Vue from 'vue'
    import {
        MInput
    } from 'muka-ui'
    import {
        XButton
    } from 'vux'
    export default {
        name: 'hello',
        components: {
            'mu-input': MInput,
            XButton
        },
        data: function () {
            return {
                verifyLabel: ['获取验证码', '后重新获取'],
                label: '',
                mobile: '',
                verifySession: '',
                code: '',
                verify: {
                    'get-verify': false,
                    'disabled-verify': true
                },
                time: 60,
            }
        },
        created: function () {
            this.label = this.time + this.verifyLabel[1]
            this.handle = setInterval(() => {
                this.time -= 1
                if (this.time <= 0) {
                    this.verify['get-verify'] = true
                    this.verify['disabled-verify'] = false
                    this.time = 60
                    this.label = this.verifyLabel[0]
                    clearInterval(this.handle)
                    return
                }
                this.label = this.time + this.verifyLabel[1]
            }, 1000)
        },
        computed: mapState([
            VUEX_NAME.findPwdObj,
        ]),
        methods: {
            ...mapMutations([
                VUEX_NAME.updateFindPwdObj,
            ]),
            getVerify: async function () {
                if (this.verify['get-verify'] === true) {
                    this.$ajax(
                        'resetPwdOne',
                        {
                            mobile: this.findPwdObj.mobile
                        },
                        (content) => {
                            //重新发送验证码
                            let obj = {}
                            obj.verifySessionId = content.verifySessionId
                            this.updateFindPwdObj(obj)

                            this.label = this.time + this.verifyLabel[1]
                            this.verify['get-verify'] = false
                            this.verify['disabled-verify'] = true
                            this.handle = setInterval(() => {
                                this.time -= 1
                                if (this.time <= 0) {
                                    this.verify['get-verify'] = true
                                    this.verify['disabled-verify'] = false
                                    this.time = 60
                                    this.label = this.verifyLabel[0]
                                    clearInterval(this.handle)
                                    return
                                }
                                this.label = this.time + this.verifyLabel[1]
                            }, 1000)
                        }, true)
                }
            },
            next: async function () {
                if (this.code === '') {
                    this.$vux.toast.show({
                        text: '请输入验证码',
                        type: 'text',
                        position: 'middle'
                    })
                    return
                }
                if (this.code.toString().length !== 6) {
                    this.$vux.toast.show({
                        text: '请输入6位验证码',
                        type: 'text',
                        position: 'middle'
                    })
                    return
                }
                this.$ajax(
                    'resetPwdTwo',
                    {
                        verifyCode: this.code,
                        verifySessionId: this.findPwdObj.verifySessionId
                    },
                    (content) => {
                        this.$router.push('/retrieval3')
                    }, true)
            }
        }
    }

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>

    .forget-pass {
        padding-left: 10px;
        position: relative;
        &:before {
            content: '';
            height: 70%;
            width: 1px;
            background: #d8d8d8;
            position: absolute;
            left: 0px;
            top: 15%;
        }
    }

    .disabled-verify {
        color: #b9b9b9;
    }

    .pass-verify {
        padding: 0 10px 0 0;
    }

</style>
